import { appConfigActions } from '@/store/appConfigSlice';
import { useAppDispatch, useAppSelector } from '@/utils/hooks';
import { getClassNames, Icon } from 'magic-ui-react';
import { FC, useEffect, useState } from 'react';
import Widget from '../Widget';
import { WidgetSizeObj } from '../Widget/cons';
import { WidgetProps, WidgetSizeType } from '../Widget/types';
import styles from './styles.module.less'
const WidgetListItemContent: FC<Pick<WidgetProps, 'widgetType'>> = (porps) => {
  const dispatch = useAppDispatch()
  const {
    appConfig: {
      box,
      appDrawerBoxsList
    },
    off: {
      isPc,
    }
  } = useAppSelector((state) => state);

  /**
 * 此组件已经被添加
 */
  const [isAdded, setIsAdded] = useState(false);

  const [sizeIndex, setSizeIndex] = useState(3);

  const currentSizeType = Object.keys(WidgetSizeObj)[sizeIndex] as WidgetSizeType

  const size = isPc ? `${box.size}px` : `calc((100vw - ${24 * 7}px) / 4)`

  const addWidget = () => {
    const newAppDrawerBoxsList = [...appDrawerBoxsList]
    newAppDrawerBoxsList.push({
      widgetType: porps.widgetType,
      sizeType: currentSizeType,
      typeProps: {}
    })
    dispatch(appConfigActions.updateOther({
      appDrawerBoxsList: newAppDrawerBoxsList
    }))
  }

  useEffect(() => {
    const res = appDrawerBoxsList.findIndex(item => item.widgetType === porps.widgetType)
    setIsAdded(res !== -1)
  }, [appDrawerBoxsList]);

  return (
    <main
      className={styles.WidgetListItem}
    >
      <div className={styles.WidgetListItemOption}>
        <div className='flex gap-3 items-center'>
          <div
            className={styles.iconBtn}
            onClick={() => {
              if (sizeIndex > 0) {
                setSizeIndex(sizeIndex - 1)
              }
            }}
          >
            <Icon icon="angle-left" />
          </div>
          <div>
            {currentSizeType}
          </div>
          <div
            className={styles.iconBtn}
            onClick={() => {
              if (sizeIndex < Object.keys(WidgetSizeObj).length - 1) {
                setSizeIndex(sizeIndex + 1)
              }
            }}
          >
            <Icon icon="angle-right" />
          </div>
        </div>
        <div
          className={getClassNames([
            styles.iconBtn,
            {
              '!cursor-not-allowed': isAdded
            }
          ])}
          onClick={() => {
            if (!isAdded) {
              addWidget()
            }
          }}
        >
          <Icon icon="plus" />
        </div>
      </div>
      <div
        className='flex justify-center items-center'
        style={{
          minHeight: isPc ? `${box.size * 2}px` : `calc((100vw - ${24 * 7}px) / 2)`
        }}
      >
        <div
          className={styles.WidgetListItemContent}
          style={{
            gridTemplateColumns: `repeat(${currentSizeType.split('-')[1]}, ${size}`,
            gridTemplateRows: `repeat(${currentSizeType.split('-')[0]}, ${size}`,
          }}
        >
          <Widget widgetType={porps.widgetType} sizeType={currentSizeType} />
        </div>
      </div>
    </main>
  )
}
export default WidgetListItemContent